
import React, { useState, useEffect } from 'react';
import './index.less';
import * as Inter from './interface';
import png from '@/util/img';

let text: string = ''; //当前打印的内容
let textTime: any = null; //打印定时器
let textCount: number = 0; //需要打印的数量
let waitTime: number = 20000; //重新打印的时间
let activeStatic: number = 0;
const Foot = () => {
  const [active, setActive] = useState<number>(0);
  const [showText, setShowText] = useState<string>('');
  const [rangNum, setRangNum] = useState<number>(1);

  //打字动画
  function renderFont(arr: string) {
    textTime = setInterval(() => {
      //打印完毕
      if (textCount == arr.length) {
        clearInterval(textTime);
        //等待下一轮打印
        setTimeout(() => {
          text = '';
          textCount = 0;
          let num = Math.floor(Math.round(Math.random() * (png.portrait.length - 1)));
          setRangNum(num);
          if (activeStatic == Inter.list.length - 1) {
            activeStatic = 0;
          }
          activeStatic++;
          setActive(activeStatic);
        }, waitTime);
        return;
      }
      text = `${text}${arr[textCount]}`;
      setShowText(text);
      textCount++;
    }, 200);
  }

  useEffect(() => {
    renderFont(Inter.list[active]);
  }, [active]);
  return (
    <div className="footer">
      <div className="footer-content">
        <span className="footer-portrait">
          <img src={png.portrait[rangNum]} alt="" />
        </span>
        <p>{showText}</p>
      </div>
    </div>
  );
};

export default Foot;
